<div class="dialog-box">
    <h2>添加商品</h2>
    <table>
        <thead>
        <tr>
            <th>Category ID</th>
            <th>Product ID</th>
            <th>Item ID</th>
            <th>Unit Cost</th>
            <th>List Price</th>
            <th>Supplier</th>
            <th>Status</th>
            <th>Description</th>
            <th>Product Picture</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <p-dropdown [options]="categoryOptions"
                            (value)="getCategoryId($event)"></p-dropdown>
            </td>
            <td>
                <p-dropdown [options]="productOptions" (value)="getProductId($event)"></p-dropdown>
            </td>
            <td>
                <p-dropdown [options]="[]" (value)="getItemId($event)"></p-dropdown>
            </td>
            <td>
                <p-dropdown [options]="[]" (value)="getUnitCost($event)"></p-dropdown>
            </td>
            <td>
                <p-dropdown [options]="[]" (value)="getListPrice($event)"></p-dropdown>
            </td>
            <td>
                <p-dropdown [options]="supplierOptions" (value)="getSupplier($event)"></p-dropdown>
            </td>
            <td>
                <p-dropdown [options]="_statusOptions" (value)="get_status($event)"></p-dropdown>
            </td>
            <td>
                <p-dropdown [options]="descriptionOptions" (value)="getDescription($event)"></p-dropdown>
            </td>
            <td>
                <input type="file" accept="image/*" (change)="onFileSelected($event)">
                <div>
                    <input type="button" value="浏览图片"/>
                </div>
            </td>
        </tr>
        <tr>
            <td style="background-color: rgba(0,0,0,0);border: 1px rgba(0,0,0,0) solid"></td>
            <td style="background-color: rgba(0,0,0,0);border: 1px rgba(0,0,0,0) solid"></td>
            <td style="background-color: rgba(0,0,0,0);border: 1px rgba(0,0,0,0) solid"></td>
            <td style="background-color: rgba(0,0,0,0);border: 1px rgba(0,0,0,0) solid"></td>
            <td style="background-color: rgba(0,0,0,0);border: 1px rgba(0,0,0,0) solid"></td>
            <td style="background-color: rgba(0,0,0,0);border: 1px rgba(0,0,0,0) solid"></td>
            <td style="background-color: rgba(0,0,0,0);border: 1px rgba(0,0,0,0) solid"></td>
            <td style="background-color: rgba(0,0,0,0);border: 1px rgba(0,0,0,0) solid"></td>
            <td style="background-color: rgba(0,0,0,0);border: 1px rgba(0,0,0,0) solid">
                <div *ngIf="imageUrl">
                    <img id="picture" [src]="imageUrl" alt="Selected Image">
                </div>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="buttons">
        <button id="confirm" (click)="onConfirm()">确定</button>
        <button id="cancel" (click)="onCancel()">取消</button>
    </div>
</div>
